.btngrident {
  background: -ms-linear-gradient(#fff 0%, #f4f4f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fff, endColorstr=#f4f4f4, grandientType=1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#f4f4f4));
  border: 1px solid #f4f4f4;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  height: 20px;
}
.header {
  position: relative;
  height: 60px;
  padding: 0 60px;
  background: #cc3341;
}
.header .logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -khtml-transform: translateY(-50%);
}
.header .logo > img {
  height: 40px;
  display: inline-block;
  vertical-align: middle;
}
.header .logo > div {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
  color: #fff;
  margin-left: 10px;
}
.header .logo span {
  font-size: 16px;
  vertical-align: middle;
  color: #fff;
}
.header .login-out {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -khtml-transform: translateY(-50%);
  width: 60px;
  height: 30px;
  text-align: center;
  color: #cc3341;
  background: #fff;
  line-height: 30px;
  font-size: 14px;
  right: 60px;
}
.header .user-detail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -khtml-transform: translateY(-50%);
  right: 160px;
}
.header .user-detail > div {
  color: #fff;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
}
.header .user-detail .header-line {
  width: 1px;
  background: #fff;
  height: 10px;
  margin: 0 10px;
}
.content {
  position: absolute;
  top: 60px;
  bottom: 0;
  overflow: auto;
  width: 100%;
}
.option-box {
  width: 1100px;
  margin: 70px auto;
  height: 100%;
}
.option-box .option-unit {
  float: left;
  width: 200px;
  height: 260px;
  margin: 0 10px;
  margin-bottom: 20px;
  background: #eaeaea;
}
.option-box .option-middle{
  color: #1f1c2c;
}
.option-box .option-unit .option-top {
  margin: 0 auto;
  padding-top: 60px;
  display: block;
  width: 50px;
}
.option-box .option-unit .write {
  display: none;
}
.option-box .option-unit .option-middle {
  font-size: 16px;
  text-align: center;
  margin-top: 30px;
}
.option-box .option-unit .option-bottom {
  text-align: center;
  color: #808080;
  font-size: 12px;
  margin-top: 10px;
}
.option-box .option-active {
  background: #cc3341;
  box-shadow: 1px 1px 10px 1px rgba(204, 51, 65, 0.5);
  -o-box-shadow: 1px 1px 10px 1px rgba(204, 51, 65, 0.5);
  -moz-box-shadow: 1px 1px 10px 1px rgba(204, 51, 65, 0.5);
  -webkit-box-shadow: 1px 1px 10px 1px rgba(204, 51, 65, 0.5);
}
.option-box .option-active .option-middle {
  color: #fff;
}
.option-box .option-active .option-top {
  display: none;
}
.option-box .option-active .write {
  display: block;
}
.option-box .option-active .option-bottom {
  color: rgba(255, 255, 255, 0.7);
}
